<template>
  <div class="shopping-cart">
    <h2>Shopping Cart</h2>
    <!-- 商品列表 -->
    <div class="product-list">
      <template v-for="item in myshops" :key="item.id">
        <slot :item="item"></slot>
      </template>
    </div>

    <!-- 购物车总结 -->
    <div class="cart-summary">
      <h2>Cart Summary</h2>
      <div>
        Total Items: <span>{{ myshops.length }}</span>
      </div>
      <div>
        Total Price: <span>{{ allPrice }}</span>
      </div>
      <button class="checkout-btn">Checkout</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { type IshopInfo } from '@/types/shop';

// shops是Props解构出来的变量，他是只读的，不可以直接修改，需要从新定义变量接受他的值
const { shops } = defineProps<{
  shops: IshopInfo[];
}>();

//子组件自己的ref对象，可以修改
const myshops = ref<IshopInfo[]>(shops);

//添加商品
const addShop = (shop: IshopInfo) => {
  myshops.value.push(shop);
};

//修改某个商品指定属性的值（ts:类型约束）
const editShop = <k extends keyof IshopInfo>(index:number,filed:k,val:IshopInfo[k]) => {
  // shops.value[0].price = 2000
  // myshops.value[index][filed] = val
  myshops.value[index][filed] = val
};

//allPrice 计算属性，他涉及不到修改值，所以可以直接使用 Props解构出来的值
const allPrice = computed(() => {
  return shops.reduce((pre, cur) => {
    return pre + cur.price * cur.count;
  }, 0);
});

//导出子组件的方法
defineExpose({
  addShop,
  editShop
});
</script>

<style lang="scss">
/* 主体购物车样式 */
.shopping-cart {
  font-size: 0.8em !important;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: rgba($color: #000000, $alpha: 0.6);
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}
</style>
